<template>
    <div class="detail-container">
      <!-- 用户状态信息区域 -->
      <div class="status-card">
        <div class="status-header">
          <h3>User Status</h3>
        </div>
        <div class="status-content">
          <div class="status-row">
            <span class="status-label">User ID:</span>
            <span class="status-value">{{ dealerData.userId || '197762586346251008' }}</span>
            <span class="status-label">KYC Status:</span>
            <span class="status-value kyc-pending">{{ dealerData.kycStatus || 'Pending' }}</span>
            <span class="status-label">Create Time:</span>
            <span class="status-value">{{ dealerData.createTime || '2023-10-13 16:45:43' }}</span>
          </div>
          <div class="status-row">
            <span class="status-label">Update Time:</span>
            <span class="status-value">{{ dealerData.updateTime || '2025-10-13 17:49:31' }}</span>
            <span class="status-label">Return Remark:</span>
            <span class="status-value">{{
              dealerData.returnRemark || 'CONTACT ISNT PICKING'
            }}</span>
          </div>
        </div>
      </div>

      <!-- 身份信息区域 -->
      <div class="identity-section">
        <h2 class="section-title"> <i class="icon"></i> Identity </h2>
        <div class="identity-content">
          <div class="info-grid">
            <div class="info-item">
              <label>Dealer Name:</label>
              <span>{{ dealerData.dealerName || 'OMOWUNMI SEKINAT ADAMS' }}</span>
            </div>
            <div class="info-item">
              <label>User Level:</label>
              <span>-</span>
            </div>
            <div class="info-item">
              <label>Phone Number:</label>
              <span>{{ dealerData.phoneNumber || '023407018966689' }}</span>
            </div>
            <div class="info-item">
              <label>Choose Verification Type:</label>
              <span>{{ dealerData.verificationType || 'NIN' }}</span>
            </div>
            <div class="info-item">
              <label>BIVN:</label>
              <span>-</span>
            </div>
            <div class="info-item">
              <label>NIN:</label>
              <span>{{ dealerData.nin || '80730781853' }}</span>
            </div>
            <div class="info-item">
              <label>Gender:</label>
              <span>{{ dealerData.gender || 'Female' }}</span>
            </div>
            <div class="info-item">
              <label>Date Of Birth:</label>
              <span>{{ dealerData.dateOfBirth || '1993-07-14' }}</span>
            </div>
            <div class="info-item">
              <label>State Name:</label>
              <span>{{ dealerData.stateName || 'Ogun State' }}</span>
            </div>
            <div class="info-item">
              <label>Area Name:</label>
              <span>{{ dealerData.areaName || 'Epe' }}</span>
            </div>
            <div class="info-item">
              <label>Lga Name:</label>
              <span>{{ dealerData.lgaName || 'Oke-balogun' }}</span>
            </div>
            <div class="info-item">
              <label>Lago 1 Token:</label>
              <span>{{ dealerData.lagoToken || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Street Address/No:</label>
              <span>{{
                dealerData.streetAddress || 'NO 1 ITORO ROAD SABO ALAKA FILLING STATION OGOGU OGUN'
              }}</span>
            </div>
            <div class="info-item">
              <label>House No:</label>
              <span>{{ dealerData.houseNo || '' }}</span>
            </div>
            <div class="info-item">
              <label>Email:</label>
              <span>{{ dealerData.email || 'adamssekintotgmail772709' }}</span>
            </div>
            <div class="info-item">
              <label>Regular Exhibition State Name:</label>
              <span>{{ dealerData.exhibitionState || 'Ogun State' }}</span>
            </div>
            <div class="info-item">
              <label>Regular Area Name:</label>
              <span>{{ dealerData.exhibitionArea || 'Shagamu' }}</span>
            </div>
            <div class="info-item">
              <label>Regular Exhibition Location:</label>
              <span>{{
                dealerData.exhibitionLocation ||
                'latitude: 6.707740095722709, longitude: 3.516403199264716'
              }}</span>
            </div>
            <div class="info-item">
              <label>Regular Exhibition Address:</label>
              <span>{{
                dealerData.exhibitionAddress || 'PG2C+ H43, Ijebu-Ode, Ogun, Nigeria'
              }}</span>
            </div>
            <div class="info-item">
              <label>Whatsapp:</label>
              <span>{{ dealerData.whatsapp || '023407018966689' }}</span>
            </div>
            <div class="info-item">
              <label>Alternate Phone Number:</label>
              <span>{{ dealerData.alternatePhone || '-' }}</span>
            </div>
          </div>

          <!-- 图片展示区域 -->
          <div class="image-section">
            <div class="image-item">
              <label>live Pic:</label>
              <div class="image-container">
                <img
                  :src="dealerData.livePic || 'https://via.placeholder.com/100'"
                  alt="Live Picture"
                  class="user-image"
                />
              </div>
            </div>
            <div class="image-item">
              <label>BD Group Photo:</label>
              <div class="image-container">
                <img
                  :src="dealerData.bdGroupPhoto || 'https://via.placeholder.com/100'"
                  alt="BD Group Photo"
                  class="user-image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Business Info区域 -->
      <div class="identity-section" style="margin-top: 20px">
        <h2 class="section-title"> <i class="icon"></i> Business Info </h2>
        <div class="identity-content">
          <div class="info-grid">
            <div class="info-item">
              <label>BD ID:</label>
              <span>{{ dealerData.bdId || 'PLP007038' }}</span>
            </div>
            <div class="info-item">
              <label>Financial Model:</label>
              <span>{{ dealerData.financialModel || 'EMI' }}</span>
            </div>
            <div class="info-item">
              <label>Tin Number:</label>
              <span>{{ dealerData.tinNumber || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Business License:</label>
              <span>{{ dealerData.businessLicense || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Business Registration Number:</label>
              <span>{{ dealerData.registrationNumber || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Business Registration Date:</label>
              <span>{{ dealerData.registrationDate || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Emergency Contact Name:</label>
              <span>{{ dealerData.emergencyContactName || 'HAMEED' }}</span>
            </div>
            <div class="info-item">
              <label>Emergency Contact Relation:</label>
              <span>{{ dealerData.emergencyRelation || 'couple' }}</span>
            </div>
            <div class="info-item">
              <label>Emergency Contact Number:</label>
              <span>{{ dealerData.emergencyContactNumber || '02340927655616' }}</span>
            </div>
            <div class="info-item">
              <label>Fixed Asset:</label>
              <span>{{ dealerData.fixedAsset || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Asset House State Name:</label>
              <span>{{ dealerData.assetHouseState || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Asset House Area Name:</label>
              <span>{{ dealerData.assetHouseArea || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Asset House Lga Name:</label>
              <span>{{ dealerData.assetHouseLga || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Car Info:</label>
              <span>{{ dealerData.carInfo || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Years In Business:</label>
              <span>{{ dealerData.yearsInBusiness || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Monthly Sales (units):</label>
              <span>{{ dealerData.monthlySales || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Monthly Utilities Expenses:</label>
              <span>{{ dealerData.monthlyUtilities || 'N0.00' }}</span>
            </div>
            <div class="info-item">
              <label>Monthly Rent:</label>
              <span>{{ dealerData.monthlyRent || 'N0.00' }}</span>
            </div>
            <div class="info-item">
              <label>Monthly Marketing Expenses:</label>
              <span>{{ dealerData.monthlyMarketing || 'N0.00' }}</span>
            </div>
            <div class="info-item">
              <label>Customer Acquisition Method:</label>
              <span>{{ dealerData.acquisitionMethod || '-' }}</span>
            </div>
            <div class="info-item">
              <label>Lease Agreement:</label>
              <span>{{ dealerData.leaseAgreement || '-' }}</span>
            </div>
          </div>

          <!-- 特殊文件和图片展示 -->
          <div class="info-grid" style="margin-top: 20px">
            <div class="info-item">
              <label>Transaction Flow File:</label>
              <span class="file-item">{{ dealerData.transactionFlowFile || 'adamsat.pdf' }}</span>
            </div>
            <div class="info-item">
              <label>Utility Bill:</label>
              <div class="image-container" style="width: 120px; height: 80px">
                <img
                  :src="dealerData.utilityBill || 'https://via.placeholder.com/120x80'"
                  alt="Utility Bill"
                  class="user-image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Settlement Info区域 -->
      <div class="identity-section" style="margin-top: 20px">
        <h2 class="section-title"> <i class="icon"></i> Settlement Info </h2>
        <div class="identity-content">
          <div class="info-grid">
            <div class="info-item">
              <label>Account Name:</label>
              <span>{{ dealerData.accountName || 'OMOWUNMI SEKINAT ADAMS' }}</span>
            </div>
            <div class="info-item">
              <label>Account Number:</label>
              <span>{{ dealerData.accountNumber || '7018886689' }}</span>
            </div>
            <div class="info-item">
              <label>Account Type:</label>
              <span>{{ dealerData.accountType || 'Personal Account' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const dealerData = ref({
  // User Status 字段
  userId: '197762586346251008',
  kycStatus: 'Pending',
  createTime: '2023-10-13 16:45:43',
  updateTime: '2025-10-13 17:49:31',
  returnRemark: 'CONTACT ISNT PICKING',

  // Identity 字段
  dealerName: 'OMOWUNMI SEKINAT ADAMS',
  phoneNumber: '023407018966689',
  verificationType: 'NIN',
  nin: '80730781853',
  gender: 'Female',
  dateOfBirth: '1993-07-14',
  stateName: 'Ogun State',
  areaName: 'Epe',
  lgaName: 'Oke-balogun',
  streetAddress: 'NO 1 ITORO ROAD SABO ALAKA FILLING STATION OGOGU OGUN',
  email: 'adamssekintotgmail772709',
  exhibitionState: 'Ogun State',
  exhibitionArea: 'Shagamu',
  exhibitionLocation: 'latitude: 6.707740095722709, longitude: 3.516403199264716',
  exhibitionAddress: 'PG2C+ H43, Ijebu-Ode, Ogun, Nigeria',
  whatsapp: '023407018966689',
  livePic: '',
  bdGroupPhoto: '',

  // Business Info 字段
  bdId: 'PLP007038',
  financialModel: 'EMI',
  tinNumber: '-',
  businessLicense: '-',
  registrationNumber: '-',
  registrationDate: '-',
  emergencyContactName: 'HAMEED',
  emergencyRelation: 'couple',
  emergencyContactNumber: '02340927655616',
  fixedAsset: '-',
  assetHouseState: '-',
  assetHouseArea: '-',
  assetHouseLga: '-',
  carInfo: '-',
  yearsInBusiness: '-',
  monthlySales: '-',
  monthlyUtilities: 'N0.00',
  monthlyRent: 'N0.00',
  monthlyMarketing: 'N0.00',
  acquisitionMethod: '-',
  leaseAgreement: '-',
  transactionFlowFile: 'adamsat.pdf',
  utilityBill: '',

  // Settlement Info 字段
  accountName: 'OMOWUNMI SEKINAT ADAMS',
  accountNumber: '7018886689',
  accountType: 'Personal Account'
})

// 实际项目中，这里应该有从API获取数据的逻辑
// 例如：
// import { getDealerDetail } from '@/api/dealer'
// import { useRoute } from 'vue-router'
//
// const route = useRoute()
// const dealerId = route.params.id
//
// const fetchDealerDetail = async () => {
//   try {
//     const res = await getDealerDetail(dealerId)
//     dealerData.value = res.data
//   } catch (error) {
//     console.error('Failed to fetch dealer detail:', error)
//   }
// }
//
// fetchDealerDetail()
</script>

<style scoped>
.detail-container {
  padding: 0;
  background-color: transparent;
}

.status-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.status-header h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.status-label {
  color: #909399;
  font-size: 14px;
}

.status-value {
  color: #303133;
  font-size: 14px;
}

.kyc-pending {
  color: #e6a23c;
  padding: 2px 8px;
  background-color: #fdf6ec;
  border-radius: 4px;
  font-size: 12px;
}

.identity-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
  font-weight: 500;
}

.section-title .icon {
  width: 20px;
  height: 20px;
  background-color: #409eff;
  border-radius: 50%;
}

.identity-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.info-item label {
  color: #909399;
  font-size: 14px;
  white-space: nowrap;
  min-width: 120px;
}

.info-item span {
  color: #303133;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.image-section {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}

.image-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.image-item label {
  color: #909399;
  font-size: 14px;
}

.image-container {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .image-section {
    flex-direction: column;
    gap: 20px;
  }

  .image-container {
    width: 100%;
    max-width: 200px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .info-item label {
    min-width: auto;
    white-space: normal;
  }

  /* 确保特殊信息区块在小屏幕也能正确显示 */
  .file-item,
  .utility-bill-container {
    width: 100%;
  }
}
</style>
